<template>
    <div class="mine full_page">
        <div class="header">
            <h4>我的</h4>
            <my-svg class="set" :name="`icon-shezhi`"></my-svg>
        </div>
        <div class="info">
            <div class="img">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558704128137&di=6f167c201866be88ce7556f133b4d5b0&imgtype=0&src=http%3A%2F%2Fwww.t-cheshi.com%2FtucsL3R1Y3NpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzExMDkwMDg0ODMvVDI3OVdYWFZkWFhYWFhYWFhYXyEhMTEwOTAwODQ4My5qcGc%3D.jpg" alt="">
            </div>
            <div class="content">
                <div class="name">未实名</div>
                <div class="mobile">{{mobile}}</div>
            </div>
        </div>
        <div class="list">
            <!--<div class="tab">-->
            <!--<span>检查更新</span>-->
            <!--</div>-->
            <div class="tab">
                <span>关于我们</span>
            </div>
            <div class="tab">
                <span>联系客服QQ</span>
                <span class="qq">123456789</span>
            </div>
        </div>
    </div>
</template>

<script>
    import mySvg from '../../base/svg'
    // import {mapGetters} from 'vuex'
    import {getUserInfo} from "../../cookie";

    export default {
        name: "index",
        components:{
            mySvg
        },
        computed:{
            // ...mapGetters([
            //     'mobile'
            // ])
        },
        data(){
            return {
                mobile:null
            }
        },
        created(){
          this.mobile = JSON.parse(getUserInfo()).mobile
        },
        methods:{

        }
    }
</script>

<style type="text/css" lang="stylus">
    .mine
        .header
            font-size 14px
            font-weight 400
            height 120px
            background-color #46A3FF
            color white
            text-align center
            overflow hidden
            .set
                font-size 20px
                color white
                position absolute
                right 20px
                top 20px
            h4
                margin-top 43px
        .info
            border 1px solid #E9E9E9
            z-index 100
            margin 0 auto
            background-color white
            width 80%
            position relative
            top -35px
            display flex
            padding 25px 20px
            align-items center
            .img
                flex 0 0 40px
                height 40px
                margin-right 20px
                img
                    width 100%
                    height 100%
                    border-radius 50%
            .content
                display flex
                flex-direction column
                align-items top
                font-size 12px
                .name
                    margin-bottom 10px
                .mobile
                    color #8E8E8E
                    font-size 12px
        .list
            padding-bottom 0
            background-color white
            position relative
            margin-top -90px
            padding-top 90px
            .tab
                padding 20px 20px
                border-bottom 1px solid #E9E9E9
                font-size 14px
                .qq
                    color #DF546A
                    float right


</style>
